<template>
    <div class="main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="formInline.searchContent" placeholder="车队名/公司名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="handleAdd">添加车队</el-button>
            </el-form-item>
        </el-form>

        <hr />

        <div class="box">
            <el-table
            :data="tableData"
            stripe
            height="505px"
            style="width: 100%">
                <el-table-column
                    prop="operation"
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                        <el-button @click="EditFleet(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    type="index"
                    label="序号"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="车队名称">
                </el-table-column>
            </el-table>

            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[8, 16, 24, 32]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
          </div>
        </div>

        <!-- 添加车队/公司 -->
        <el-dialog
          title="添加车队"
          :visible.sync="dialogFleetVisible"
          width="500px"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <!-- 公司名称 -->
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!-- 所属公司 -->
            <el-form-item label="所属公司" prop="company">
              <el-input v-model="form.company" placeholder="请选择" readonly @click.native="dialogCompanyVisible=true"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="form.id === null ? saveFleet(form) : updateFleet(form)">保存</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <!-- 选择公司 -->
        <el-dialog title="选择公司" :visible.sync="dialogCompanyVisible" width="500px">
          <company-list @option-company="optionCompany" :isDialog="true"></company-list>
        </el-dialog>
    </div>
</template>

<script>
import operateApi from '@/api/operate'
import CompanyList from '@/views/companyList'
import companyApi from '@/api/companyList'

export default {
  components: {CompanyList},

    data() {
      return {
        formInline: {
          searchContent: ''
        },
        tableData: [],
        form: {
          id: null,
          name: '',
          company: ''
        },
        currentPage: 4,
        total: 0,
        pageSize: 8,
        dialogFleetVisible: false, // 添加车队
        dialogCompanyVisible: false, //选择车辆
        rules: {
            name: [
              {required: true, message: '公司名称不能为空', trigger: 'blur'}
            ],
            company: [
              {required: true, message: '所属公司不能为空', trigger: 'blur'}
            ],
        }
      }
    },

    created() {
      this.getFleet()
    },

    methods: {
      // 编辑车队信息
      EditFleet(val){
        console.log(val.id)
        this.handleAdd()
        companyApi.getFleet(val.id).then(response => {
          const resp = response.data
          if(resp.flag){
            const respD = resp.data
            this.form.id = respD.id
            this.form.name = respD.company
            this.form.company = respD.companyP
          }
        })
      },

      // 添加车队
      handleAdd(){
        this.dialogFleetVisible = true
        this.form.id = null
        this.$nextTick(() => {
          this.$refs.form.resetFields()
        })
        console.log(this.form)
      },

      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      // 获取车队信息
      getFleet(){
        const token = localStorage.getItem('seeto-token').token
        operateApi.getOperateFleet(token, this.currentPage, this.pageSize, this.formInline).then(response => {
          const resp = response.data
          if(resp.flag){
            this.tableData = resp.data.rows
            this.total = resp.data.total
          }else{
            this.$message({
              message: resp.message,
              type: 'warning'
            })
          }
        })
      },

      // 删除车队
      deleteById(id){
        this.$confirm('确认删除这条记录吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(() => {
          console.log('确认')
          companyApi.deleteById(id).then(response => {
            const resp = response.data
            if(resp.flag){
              this.$message({
                message: resp.message,
                type: 'success'
              })
            }else{
              this.$message({
                message: resp.message,
                type: 'warning'
              })
            }
          })
        }).catch(() => {
          console.log('取消')
        })
      },

      onSubmit() {
        console.log('submit!');
        this.getFleet()
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getFleet()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getFleet()
      },

      // 关闭对话框
      handleClose(done) {  
        done();
        this.$refs['form'].resetFields()
      },

      // 添加车队
      saveFleet(form){
        this.$refs.form.validate(valid => {
          if(valid){
            console.log('添加车队')
            companyApi.addFleet(form).then(response => {
              const resp = response.data
              if(resp.flag){
                this.$message({
                  message: resp.message,
                  type: 'success'
                })
              }else{
                this.$message({
                  message: resp.message,
                  type: 'warning'
                })
              }
            })
            this.dialogFleetVisible = false
          }else{
            return false
          }
        })
      },

      optionCompany(currentRow){
        console.log('paren', currentRow)
        console.log(currentRow.company)
        this.form.company = currentRow.company
        this.dialogCompanyVisible = false
      },

      // 更改车队信息
      updateFleet(form){
        this.$refs.form.validate(valid => {
          if(valid){
            this.handleAdd()
            companyApi.updateFleet(form).then(response => {
              const resp = response.data
              if(resp.flag){
                this.$message({
                  message: resp.message,
                  type: 'success'
                })
              }else{
                this.$message({
                  message: resp.message,
                  type: 'warning'
                })
              }
            })
          }else{
            return false
          }
          this.dialogFleetVisible = false
        })
      }
    }
}
</script>

<style scoped>
hr{
    padding: 0;
    margin: 0;
}
.box{
    width: 1170px;
    height: 570px;
    /* background-color: pink; */
}
.block{
  margin-top: 20px;
}
</style>